<!-- 
 * @Description: 会话详情
 * @Author: huguodong 
 * @Date: 2023-12-15 15:45:10
!-->
<template>
  <el-drawer v-model="drawerVisible" destroy-on-close size="600px" title="会话详情">
    <!-- 用户信息 -->
    <el-card class="user-card" shadow="never">
      <div class="user-header">
        <el-avatar v-if="sessionInfo.avatar" :size="60" :src="sessionInfo.avatar" />
        <el-avatar v-else :size="60">
          <el-icon>
            <User />
          </el-icon>
        </el-avatar>
        <div class="user-detail">
          <div class="user-name">{{ sessionInfo.name }}</div>
          <div class="user-account">{{ sessionInfo.account }}</div>
          <el-tag v-if="sessionInfo.onlineStatus === 'ONLINE'" size="small" type="success">
            <el-icon class="is-loading">
              <Loading />
            </el-icon>
            在线
          </el-tag>
          <el-tag v-else size="small" type="info">离线</el-tag>
        </div>
      </div>
    </el-card>

    <!-- 基本信息 -->
    <el-card class="info-card" shadow="never">
      <template #header>
        <span class="card-title">基本信息</span>
      </template>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="用户ID">{{ sessionInfo.id }}</el-descriptions-item>
        <el-descriptions-item label="最新登录IP">{{ sessionInfo.latestLoginIp }}</el-descriptions-item>
        <el-descriptions-item label="登录地址">{{ sessionInfo.latestLoginAddress }}</el-descriptions-item>
        <el-descriptions-item label="登录时间">{{ sessionInfo.latestLoginTime }}</el-descriptions-item>
        <el-descriptions-item label="令牌数量">
          <el-tag size="small" type="primary">{{ sessionInfo.tokenCount }} 个</el-tag>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- Token列表 -->
    <el-card v-if="sessionInfo.tokenSignList && sessionInfo.tokenSignList.length > 0" class="token-card" shadow="never">
      <template #header>
        <span class="card-title">令牌列表</span>
      </template>
      <div class="token-list">
        <div v-for="(token, index) in sessionInfo.tokenSignList" :key="index" class="token-item">
          <div class="token-header">
            <el-tag :type="token.loginClientType === 'B' ? 'primary' : 'success'" size="small">
              {{ token.loginClientType === "B" ? "B端" : "C端" }}
            </el-tag>
            <el-tag v-if="token.clientIds.length > 0" size="small" type="success">
              <el-icon class="is-loading">
                <Loading />
              </el-icon>
              在线
            </el-tag>
            <el-tag v-else size="small" type="info">离线</el-tag>
          </div>
          <div class="token-info">
            <div class="info-row">
              <span class="label">设备:</span>
              <span class="value">{{ token.device || "未知设备" }}</span>
            </div>
            <div class="info-row">
              <span class="label">过期时间:</span>
              <span class="value">{{ token.tokenTimeout }}</span>
            </div>
            <div class="info-row">
              <span class="label">剩余时间:</span>
              <span class="value">{{ token.tokenRemain }}</span>
            </div>
          </div>
          <el-progress
            :color="getProgressColor(token.tokenRemainPercent)"
            :percentage="Math.round(token.tokenRemainPercent * 100)"
            :stroke-width="6"
          />
        </div>
      </div>
    </el-card>
  </el-drawer>
</template>

<script lang="ts" name="sessionDetail" setup>
import { Session } from "@/api";
import { Loading, User } from "@element-plus/icons-vue";

// 抽屉显示
const drawerVisible = ref(false);
// 会话信息
const sessionInfo = ref<Session.SessionInfo>({
  id: 0,
  account: "",
  name: "",
  avatar: "",
  onlineStatus: "",
  latestLoginIp: "",
  latestLoginAddress: "",
  latestLoginTime: "",
  tokenCount: 0,
  tokenSignList: []
});

/**
 * 打开详情抽屉
 * @param record 记录
 */
function onOpen(record: Session.SessionInfo) {
  drawerVisible.value = true;
  sessionInfo.value = record;
}

/**
 * 获取进度条颜色
 * @param percent 百分比
 */
function getProgressColor(percent: number): string {
  if (percent > 0.5) return "#67c23a";
  if (percent > 0.2) return "#e6a23c";
  return "#f56c6c";
}

// 暴露方法
defineExpose({ onOpen });
</script>

<style lang="scss" scoped>
.user-card {
  margin-bottom: 16px;

  .user-header {
    display: flex;
    align-items: center;
    gap: 20px;

    .user-detail {
      flex: 1;

      .user-name {
        font-size: 20px;
        font-weight: bold;
        color: #303133;
        margin-bottom: 8px;
      }

      .user-account {
        font-size: 14px;
        color: #909399;
        margin-bottom: 8px;
      }
    }
  }
}

.info-card,
.token-card {
  margin-bottom: 16px;

  .card-title {
    font-weight: bold;
    color: #303133;
  }
}

.token-list {
  .token-item {
    padding: 12px;
    background: #f5f7fa;
    border-radius: 4px;
    margin-bottom: 12px;

    &:last-child {
      margin-bottom: 0;
    }

    .token-header {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
    }

    .token-info {
      margin-bottom: 12px;

      .info-row {
        display: flex;
        margin-bottom: 6px;
        font-size: 13px;

        .label {
          color: #606266;
          min-width: 80px;
        }

        .value {
          flex: 1;
          color: #303133;
        }
      }
    }
  }
}

:deep(.el-card__body) {
  padding: 16px;
}

:deep(.is-loading) {
  margin-right: 4px;
}
</style>
